<template>
    <div id="articleList">
            <div class="ablock">
                <ul>
                   <!-- <router-link to="/index/notaudit/notauditpage">  -->
                   <li v-for="item in $store.state.articalList" @click="putTo">
                        <img src="../assets/img/error.png" alt="" class="error" v-show="notAuditShow">
                        <div class="bblock" :class="{Bblock:isShow}">
                            <div class="btop">
                                <span class="left">校园随手拍</span>
                                <span class="right">2018/10/10 1/1/1</span>
                                <p class="clear"></p>
                            </div>
                            <div class="bbottom">
                                <!-- 齐心协力，共创未来————记天杭童真少华学部期末动员大会 -->
                                <h3>{{item.previewTitle}}</h3>
                                <img src="http://img3.redocn.com/20130403/Redocn_2013040315103491.jpg" alt="">
                            </div>
                           
                        </div>
                         <p class="comment" v-show="notAuditShow">{{$store.state.problem}}</p>
                    </li>
                    <!-- </router-link> -->
                </ul>
                <!--///////////////控制上面元素的显示 -->
                <!-- <h1>{{notAuditShow}}</h1>
                <h1>{{article}}</h1> -->
            </div>
        
    </div>
</template>
<script>
    export default{
        data(){
            return{
                isShow:true,
               
            }
        },
        methods:{
            putTo(){
                if(this.article=="历史发布"){
                    this.$router.push('/index/articlelist/articlelistpage')
                }else if(this.article=="未审核"){
                    this.$router.push('/index/notaudit/notauditpage')
                }
            }
        },
        props:['notAuditShow','article']
    }
</script>
<style>
    #articleList{
        background: #eee;
        min-height:16.47rem;
        margin-top:-0.24rem;
    }
    #articleList .ablock li{
        margin:0.25rem ;
        background:#fff; 
        position: relative;
    }
     #articleList .bblock{
         width:95%;
         margin:0 auto;      
         overflow: auto;
        
     }
     .Bblock{
         border-bottom: 1px solid #ccc;
     }
     #articleList .bblock .btop{
         height:0.8rem;
     }
     #articleList .bblock .left{
        float:left;
        padding:0.1333rem;
     }
     #articleList .bblock .right{
        float:right;
        padding:0.16rem;
     }
     #articleList .bblock  .bbottom{
         text-align:left;
         display:flex;
         justify-content:space-between;
     }
     #articleList .bblock  .bbottom h3{
         width:70%;
     }
      #articleList .bblock  .bbottom img{
          width:1.8667rem;
          height:1.8667rem;
          padding: 0.2667rem;
      }
       #articleList .error{
           position: absolute;
           width:3.2rem;
           height:3.2rem;
           left:2.9333rem;
       }
        #articleList .comment{
            color:#FFAB49;
            text-align:left;
            padding: 0.2667rem;
        }
</style>

